<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>UploadTable 上传组件 | YL-UI</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="yl-ui 组件库文档">
    
    <link rel="preload" href="/yl-ui/assets/css/0.styles.4e038eaa.css" as="style"><link rel="preload" href="/yl-ui/assets/js/app.75a4d648.js" as="script"><link rel="preload" href="/yl-ui/assets/js/2.35f03a09.js" as="script"><link rel="preload" href="/yl-ui/assets/js/11.271fd51f.js" as="script"><link rel="prefetch" href="/yl-ui/assets/js/10.d0610750.js"><link rel="prefetch" href="/yl-ui/assets/js/12.d2c043c3.js"><link rel="prefetch" href="/yl-ui/assets/js/13.68a828bf.js"><link rel="prefetch" href="/yl-ui/assets/js/3.209edaa1.js"><link rel="prefetch" href="/yl-ui/assets/js/4.dd5f75e4.js"><link rel="prefetch" href="/yl-ui/assets/js/5.d3550bfa.js"><link rel="prefetch" href="/yl-ui/assets/js/6.51e13199.js"><link rel="prefetch" href="/yl-ui/assets/js/7.f0bcc823.js"><link rel="prefetch" href="/yl-ui/assets/js/8.f5ede323.js"><link rel="prefetch" href="/yl-ui/assets/js/9.278a947b.js">
    <link rel="stylesheet" href="/yl-ui/assets/css/0.styles.4e038eaa.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/yl-ui/" class="home-link router-link-active"><!----> <span class="site-name">YL-UI</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Libra-Lei/yl-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Libra-Lei/yl-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/yl-ui/components/base/icon.html" class="sidebar-link">Icon</a></li><li><a href="/yl-ui/components/base/radio.html" class="sidebar-link">Radio</a></li><li><a href="/yl-ui/components/base/upload.html" class="sidebar-link">Upload</a></li><li><a href="/yl-ui/components/base/tag.html" class="sidebar-link">Tag</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>高阶组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/yl-ui/components/high/upload-table.html" aria-current="page" class="active sidebar-link">UploadTable</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yl-ui/components/high/upload-table.html#基础用法" class="sidebar-link">基础用法</a></li><li class="sidebar-sub-header"><a href="/yl-ui/components/high/upload-table.html#attribute" class="sidebar-link">Attribute</a></li><li class="sidebar-sub-header"><a href="/yl-ui/components/high/upload-table.html#event" class="sidebar-link">Event</a></li><li class="sidebar-sub-header"><a href="/yl-ui/components/high/upload-table.html#uploaded-v-model-属性说明" class="sidebar-link">uploaded / v-model 属性说明</a></li></ul></li><li><a href="/yl-ui/components/high/checkbox-group.html" class="sidebar-link">CheckboxGroup</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="uploadtable-上传组件"><a href="#uploadtable-上传组件" class="header-anchor">#</a> UploadTable 上传组件</h1> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>高阶上传组件：
点击、拖拽上传；“列表模式” 和 “卡片模式”显示模式；</p></div> <h2 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h2> <div class="demo-block demo-zh-CN demo-upload-table.html" data-v-47d1da0a><div class="demo-content" data-v-47d1da0a><div><div><div class="ly-upload" data-v-664772e0><div class="ly-upload-buttons" data-v-664772e0><div class="btns" data-v-664772e0><input multiple="multiple" accept="" type="file" data-v-664772e0><button type="button" name="button" class="vs-component vs-button btn vs-button-primary vs-button-gradient includeIcon small" style="background:linear-gradient(30deg, primary 0%, primary 100%);" data-v-664772e0><!----><i class="vs-icon notranslate icon-scale vs-button--icon feather icon-plus null" style="order:0;margin-right:5px;margin-left:0px;"></i><span class="vs-button-text vs-button--text">选择文件</span><span class="vs-button-linex" style="top:auto;bottom:-2px;background:primary;left:50%;transform:translate(-50%);"></span></button><button type="button" name="button" class="vs-component vs-button btn vs-button-success vs-button-gradient includeIcon small" style="background:linear-gradient(30deg, success 0%, primary 100%);" data-v-664772e0><!----><i class="vs-icon notranslate icon-scale vs-button--icon feather icon-upload-cloud null" style="order:0;margin-right:5px;margin-left:0px;"></i><span class="vs-button-text vs-button--text">上传选择文件</span><span class="vs-button-linex" style="top:auto;bottom:-2px;background:success;left:50%;transform:translate(-50%);"></span></button></div><i class="vs-icon notranslate icon-scale mode-icon material-icons null" data-v-664772e0>list</i></div><div class="ly-upload-list" style="display:none;" data-v-664772e0><div class="vs-component vs-con-table vs-table-primary" data-v-664772e0><header class="header-table vs-table--header"><!----></header><div class="con-tablex vs-table--content"><div class="vs-con-tbody vs-table--tbody " style="max-height:auto;"><table class="vs-table vs-table--tbody-table"><thead class="vs-table--thead"><tr><!----><th colspan="1" rowspan="1" data-v-664772e0><div class="vs-table-text">文件名称<!----></div></th><th colspan="1" rowspan="1" data-v-664772e0><div class="vs-table-text">文件大小<!----></div></th><th colspan="1" rowspan="1" data-v-664772e0><div class="vs-table-text">上传时间<!----></div></th><th colspan="1" rowspan="1" data-v-664772e0><div class="vs-table-text">操作<!----></div></th></tr></thead></table></div><div class="not-data-table vs-table--not-data"> 暂无文件 </div><!----></div></div></div><div class="ly-upload-card" data-v-664772e0><!----><div class="ly-upload-image" data-v-664772e0><img alt="图片" style="max-width:none;max-height:none;" data-v-664772e0><!----><button type="button" class="ly-upload-image-delete" data-v-664772e0><i translate="translate" class="material-icons notranslate" data-v-664772e0> clear </i></button></div><div class="ly-upload-image" data-v-664772e0><img alt="图片" style="max-width:none;max-height:none;" data-v-664772e0><!----><button type="button" class="ly-upload-image-delete" data-v-664772e0><i translate="translate" class="material-icons notranslate" data-v-664772e0> clear </i></button></div><div class="ly-upload-input" data-v-664772e0><input accept="" multiple="multiple" type="file" data-v-664772e0><div class="ly-upload-input-text" data-v-664772e0><i class="vs-icon notranslate icon-scale material-icons null" data-v-664772e0>cloud_upload</i><h1 data-v-664772e0>拖拽文件到此处或点击选择</h1></div></div></div></div></div></div></div> <div class="meta" data-v-47d1da0a><div class="description" data-v-47d1da0a><div data-v-47d1da0a><p data-v-47d1da0a>注意：<code data-v-47d1da0a>v-model</code> 和 <code data-v-47d1da0a>uploaded</code> 共同组成展示的文件列表，上传时，<strong data-v-47d1da0a>应仅上传 v-model</strong>, 并且上传（或删除）成功后需要更新 <code data-v-47d1da0a>v-model</code> 和 <code data-v-47d1da0a>uploaded</code></p></div></div> <div class="code-content" data-v-47d1da0a><div class="language-html extra-class" data-v-47d1da0a><pre class="language-html" data-v-47d1da0a><code data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>template</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
  <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>div</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
    <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>yl-upload-table</span>
      <span class="token attr-name" data-v-47d1da0a>:uploaded</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>uploaded<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
      <span class="token attr-name" data-v-47d1da0a>v-model</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>files<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
      <span class="token attr-name" data-v-47d1da0a>@delete</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>handleDelete<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
      <span class="token attr-name" data-v-47d1da0a>@upload-all</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>handleUpload<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
    <span class="token punctuation" data-v-47d1da0a>/&gt;</span></span>
  <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>div</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>template</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>

<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>script</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span><span class="token script" data-v-47d1da0a><span class="token language-javascript" data-v-47d1da0a>
<span class="token keyword" data-v-47d1da0a>export</span> <span class="token keyword" data-v-47d1da0a>default</span> <span class="token punctuation" data-v-47d1da0a>{</span>
  name<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'UploadTable'</span><span class="token punctuation" data-v-47d1da0a>,</span>
  <span class="token function" data-v-47d1da0a>data</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
    <span class="token keyword" data-v-47d1da0a>return</span> <span class="token punctuation" data-v-47d1da0a>{</span>
      uploaded<span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>[</span>
        <span class="token punctuation" data-v-47d1da0a>{</span>
          uuid<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'abcdfgfgh1'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          name<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'示例文件1'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          size<span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>null</span><span class="token punctuation" data-v-47d1da0a>,</span>
          uploadTime<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'2021年3月3日'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          key<span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>null</span><span class="token punctuation" data-v-47d1da0a>,</span>
          src<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1160360589,2429665544&amp;fm=26&amp;gp=0.jpg'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          type<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'image'</span>
        <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
        <span class="token punctuation" data-v-47d1da0a>{</span>
          uuid<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'abcdfgfgh2'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          name<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'示例文件2'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          size<span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>null</span><span class="token punctuation" data-v-47d1da0a>,</span>
          uploadTime<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'2021年3月4日'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          key<span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>null</span><span class="token punctuation" data-v-47d1da0a>,</span>
          src<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3634138358,495714429&amp;fm=11&amp;gp=0.jpg'</span><span class="token punctuation" data-v-47d1da0a>,</span>
          type<span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>'image'</span>
        <span class="token punctuation" data-v-47d1da0a>}</span>
      <span class="token punctuation" data-v-47d1da0a>]</span><span class="token punctuation" data-v-47d1da0a>,</span>
      files<span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>[</span><span class="token punctuation" data-v-47d1da0a>]</span>
    <span class="token punctuation" data-v-47d1da0a>}</span>
  <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
  methods<span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>{</span>
    <span class="token function" data-v-47d1da0a>handleDelete</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token parameter" data-v-47d1da0a>id</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
      <span class="token comment" data-v-47d1da0a>// 1. 从服务端删除 文件</span>

      <span class="token comment" data-v-47d1da0a>// 2. 更新 uploaded</span>
      <span class="token keyword" data-v-47d1da0a>this</span><span class="token punctuation" data-v-47d1da0a>.</span>uploaded <span class="token operator" data-v-47d1da0a>=</span> <span class="token keyword" data-v-47d1da0a>this</span><span class="token punctuation" data-v-47d1da0a>.</span>uploaded<span class="token punctuation" data-v-47d1da0a>.</span><span class="token function" data-v-47d1da0a>filter</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token parameter" data-v-47d1da0a>x</span> <span class="token operator" data-v-47d1da0a>=&gt;</span> x<span class="token punctuation" data-v-47d1da0a>.</span>uuid <span class="token operator" data-v-47d1da0a>!==</span> id<span class="token punctuation" data-v-47d1da0a>)</span><span class="token punctuation" data-v-47d1da0a>;</span>
    <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
    <span class="token function" data-v-47d1da0a>handleUpload</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
      <span class="token comment" data-v-47d1da0a>// 1. 上传 files 到服务端</span>
      <span class="token comment" data-v-47d1da0a>// 2. 剔除已上传的文件</span>
      <span class="token keyword" data-v-47d1da0a>this</span><span class="token punctuation" data-v-47d1da0a>.</span>files <span class="token operator" data-v-47d1da0a>=</span> <span class="token punctuation" data-v-47d1da0a>[</span><span class="token punctuation" data-v-47d1da0a>]</span><span class="token punctuation" data-v-47d1da0a>;</span>
      <span class="token comment" data-v-47d1da0a>// 3. 更新 uploaded</span>
      <span class="token comment" data-v-47d1da0a>// this.uploaded = 上传成功后服务端返回的最新列表</span>
    <span class="token punctuation" data-v-47d1da0a>}</span>
  <span class="token punctuation" data-v-47d1da0a>}</span>
<span class="token punctuation" data-v-47d1da0a>}</span>
</span></span><span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>script</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control" style="width:unset;" data-v-47d1da0a><i class="caret-bottom icon" data-v-47d1da0a data-v-47d1da0a></i> <span style="display:none;" data-v-47d1da0a data-v-47d1da0a>显示代码</span> <span class="copy-action" style="display:;" data-v-47d1da0a>复制代码</span> <span class="copy-action copy-action-success" style="display:none;" data-v-47d1da0a data-v-47d1da0a>复制代码</span></div></div><h2 id="attribute"><a href="#attribute" class="header-anchor">#</a> Attribute</h2> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">可选值</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">accepts</td> <td style="text-align:left;">array</td> <td style="text-align:left;">允许上传的文件类型</td> <td style="text-align:left;">['.jpg']</td> <td style="text-align:left;">[]</td></tr> <tr><td style="text-align:left;">multiple</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">是否允许多文件上传</td> <td style="text-align:left;">true / false</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">uploaded</td> <td style="text-align:left;">array</td> <td style="text-align:left;">已经上传到服务端的文件列表，用于回显和比较下面的 v-model</td> <td style="text-align:left;">--</td> <td style="text-align:left;">[]</td></tr> <tr><td style="text-align:left;">v-model</td> <td style="text-align:left;">array</td> <td style="text-align:left;">绑定值，待上传的文件列表，区别于 uploaded；组件显示的列表 = uploaded + value;</td> <td style="text-align:left;">--</td> <td style="text-align:left;">[]</td></tr></tbody></table> <h2 id="event"><a href="#event" class="header-anchor">#</a> Event</h2> <table><thead><tr><th style="text-align:left;">事件名</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">参数</th></tr></thead> <tbody><tr><td style="text-align:left;">delete</td> <td style="text-align:left;">删除文件触发（删除未上传的文件不会触发）</td> <td style="text-align:left;">function(id)</td></tr> <tr><td style="text-align:left;">upload-all</td> <td style="text-align:left;">点击上传文件触发</td> <td style="text-align:left;">--</td></tr></tbody></table> <h2 id="uploaded-v-model-属性说明"><a href="#uploaded-v-model-属性说明" class="header-anchor">#</a> uploaded / v-model 属性说明</h2> <table><thead><tr><th style="text-align:left;">字段名</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">key</td> <td style="text-align:left;">文件组件内的唯一标识, 数据回显时候设置为 null 即可</td></tr> <tr><td style="text-align:left;">src</td> <td style="text-align:left;">图片文件预览地址，或者文件（base64压缩等）</td></tr> <tr><td style="text-align:left;">name</td> <td style="text-align:left;">文件名称</td></tr> <tr><td style="text-align:left;">size</td> <td style="text-align:left;">文件大小</td></tr> <tr><td style="text-align:left;">uploadTime</td> <td style="text-align:left;">上传时间</td></tr> <tr><td style="text-align:left;">type</td> <td style="text-align:left;">文件类 --&gt; image：图片文件， 其他：其他文件</td></tr> <tr><td style="text-align:left;">uuid</td> <td style="text-align:left;">文件唯一标识id, 用于组件调用者自行区分文件（例如：设置为服务端id）</td></tr> <tr><td style="text-align:left;">file</td> <td style="text-align:left;">File 对象</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">2021-7-8 13:15:05</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/yl-ui/components/base/tag.html" class="prev">
        Tag
      </a></span> <span class="next"><a href="/yl-ui/components/high/checkbox-group.html">
        CheckboxGroup
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/yl-ui/assets/js/app.75a4d648.js" defer></script><script src="/yl-ui/assets/js/2.35f03a09.js" defer></script><script src="/yl-ui/assets/js/11.271fd51f.js" defer></script>
  </body>
</html>
